<template>
  <view class="article-content">
    <image
      :src="baseUrl + articleDetails.image"
      mode=""
      class="article-img"
    ></image>
    <view class="article-word">
      <view class="article-title">{{ articleDetails.title }}</view>
      <view class="article-date">{{ articleDetails.createtime }}</view>
      <view class="article-main">
        <rich-text :nodes="articleDetails.content"></rich-text>
      </view>
    </view>
    <view :class="articleDetails.is_click == 0 ? 'like on':'like'" @click="handleClick()">
      <image :src="articleDetails.is_click == 0 ? '../../static/images/dislike.png':'../../static/images/zan.png'" mode=""></image>
      <text>{{ articleDetails.click }}</text>
    </view>
    <view class="article-comment">
      <image
        src="../../static/images/write-comment.png"
        mode=""
        class="write-comment"
      ></image>
     <span
		type=""
		value=""
		class="ipt"
		readonly unselectable="on"
		@click="
		  $Router.push({
			path: '/pages/hospital/article-comment',
			query: { id: id },
		  })
		"
	  >写评论...</span>
      <view
        class="image-wrap"
        @click="
          $Router.push({
            path: '/pages/hospital/comment-list',
            query: { id: id },
          })
        "
      >
        <text class="comment-num" v-if="articleDetails.comment_num > 0">{{
          articleDetails.comment_num
        }}</text>
        <image
          src="../../static/images/comment.png"
          mode=""
          class="comment-img"
        ></image>
      </view>
    </view>
    <shopro-auth-modal></shopro-auth-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      articleDetails: {},
      id: "",
	  baseUrl: this.$baseUrl, //后台域名地址
    };
  },
  mounted() {
    this.getArticleDetails();
    this.id = this.$Route.query.id;
	console.log( "home-监听页面显示");
  },
  onLoad() {
    this.getArticleDetails();
  },
  methods: {
    getArticleDetails() {
      let that = this;
      that
        .$https("doctindex.articleDetails", {
          id: that.$Route.query.id,
        })
        .then((res) => {
          if (res.code === 1) {
            that.articleDetails = res.data;
            that.articleDetails.createtime = that.$u.timeFormat(
              res.data.createtime,
              "yyyy-mm-dd"
            );
          }
        });
    },
    handleClick() {
      let that = this;
      that
        .$https("doctindex.articleClick", {
          id: that.$Route.query.id,
        })
        .then((res) => {
          console.log(res, "res");
          if (res.code === 1) {
            uni.showToast({
              title: res.msg,
              duration: 2000,
              icon: "none",
              position: "bottom",
            });
            that.getArticleDetails();
          }
        });
    },
  },
};
</script>

<style lang="scss">
.article-content {
  background: #ffffff;
  padding-bottom: 90rpx;
  .article-img {
    width: 100%;
    height: 390rpx;
  }
  .article-word {
    background: #ffffff;
    padding: 0 30rpx;
    .article-title {
      font-size: 36rpx;
      font-weight: bold;
      padding: 40rpx 0;
    }
    .article-date {
      font-size: 24rpx;
      color: #aaaaaa;
    }
    .article-main {
      padding: 30rpx 0;
      color: #333333;
      font-size: 30rpx;
    }
  }
  .like {
    width: 180rpx;
    height: 70rpx;
    margin: 60rpx auto;
    background: rgba(223, 185, 130, 1);
    color: #ffffff;
    text-align: center;
    line-height: 70rpx;
    border-radius: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      width: 30rpx;
      height: 30rpx;
      margin-right: 10rpx;
    }
  }
  .like.on{
	  border: 1px solid #AAAAAA;
	  background: #FFFFFF;
	  color: #AAAAAA;
  }
  
  .article-comment {
    position: fixed;
    height: 90rpx;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-top: 2rpx solid #dddddd;
    .ipt {
      background: rgba(221, 221, 221, 0.3);
      height: 60rpx;
      width: 530rpx;
      border-radius: 30rpx;
      padding-left: 70rpx;
	  display:flex;
	  align-items: center;
	  color: gray;
    }
    .image-wrap {
      position: relative;
      .comment-img {
        width: 40rpx;
        height: 40rpx;
        margin-left: 40rpx;
      }
      .comment-num {
        position: absolute;
        top: -6rpx;
        right: -6rpx;
        color: #ffffff;
        background: rgba(223, 32, 32, 1);
        width: 36rpx;
        height: 36rpx;
        line-height: 36rpx;
        text-align: center;
        border-radius: 50%;
        font-size: 24rpx;
        transform: scale(0.7);
        transform-origin: top right;
		z-index: 10;
      }
    }

    .write-comment {
      width: 28rpx;
      height: 30rpx;
      position: relative;
      left: 50rpx;
    }
  }
}
</style>
